<template>
  <view class="list-item">
    <image :src="item.image_url" class="icon"></image>
    <view class="content">
      <view>
        <text class="title">{{ item.name }}</text>
      </view>
      <view>
        <text class="num">{{ item.version }}</text>
      </view>
      <view>
        <text class="desc">{{ item.description }}</text>
      </view>
    </view>
    <view>
      <template v-if="item.is_available">
        <view v-if="!item.is_purchased" class="enter-btn" @click="handleBuy(item.id)">
          购买
        </view>
        <template v-else>
          <view class="enter-btn" @click="handleClick(item.click_url)">
            进入
          </view>
          <text class="agent-text">Agent已拥有</text>
        </template>
      </template>
      <template v-else>
        <view class="enter-btn" @click="handleClick(item.click_url)">
          进入
        </view>
        <text class="agent-text">Agent已拥有</text>
      </template>
    </view>

  </view>
</template>

<script setup lang="ts">
import { useProductStore } from '@/stores/product';
const productStore=useProductStore()

// 接收父组件传递的列表项数据
const props = defineProps({
  item: {
    type: Object,
    required: true
  },
  borderWidth: {
    type: String,
    default: '100%'
  },
  PayIs:{
    type:Boolean,
    default:false
  }
});

// 格式化日期时间为ISO 8601格式
const formatDateTime = (date: Date | string): string => {
  const d = new Date(date);
  return d.toISOString();
}

// 点击事件处理函数
const handleClick = (click_url: string) => {
  // 这里可以添加点击后的逻辑，比如跳转页面等
  // if (!useStore.userInfo) {
  //   uni.showToast({
  //     title: '用户未登录',
  //     icon: 'none'
  //   })
  //   return
  // }

  uni.navigateTo({
    url: `/pages/AIChat/AiChat?click_url=${encodeURIComponent(click_url)}`
  })
};
// 购买
// 处理购买
const handleBuy = async (id: string) => {
  try {
    // 如果item中有expire_time，确保它是正确的ISO格式
    if (props.item.expire_time) {
      props.item.expire_time = formatDateTime(props.item.expire_time);
    }
    await productStore.handleBuy(id);
  } catch (error) {
    console.error('Purchase error:', error);
    uni.showToast({
      title: '购买失败',
      icon: 'none'
    });
  }
}
</script>

<style scoped lang="scss">
.list-item {
  display: flex;
  align-items: center;
  padding: 20rpx;
  padding-left: 30rpx;
  position: relative;
}

.list-item::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-40%);
  width: v-bind('props.borderWidth');
  height: 2rpx;
  background-color: #35383e;
}

.icon {
  width: 120rpx;
  height: 120rpx;
  margin-right: 20rpx;
}

.content {
  flex: 1;
}

.title {
  font-size: 32rpx;
  font-weight: bold;
  color: #fff
}

.desc {
  font-size: 24rpx;
  color: #fff
}

.num {
  font-size: 24rpx;
  color: #aca9a9
}

.enter-btn {
  background-color: #296297;
  color: #fff;
  height: 60rpx;
  width: 120rpx;
  border: none;
  margin-right: 10rpx;
  border-radius: 30rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
}
.agent-text {
  font-size: 24rpx;
  color: #fff;
  margin-top: 4rpx;
  margin-left: 20rpx;
  text-align: center;
}
</style>
